<template>
    <el-row class="tac">
        <el-col class="fixed-width" :span="3">
            <div class="title">WMS仓储管理系统</div>
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="#333333" text-color="#fff" active-text-color="#ffffff">
                <!-- 第一个 -->
                <el-menu-item index="1" @click="navigateTo('/index')">
                    <i class="">
                        <img src="https://cdn7.axureshop.com/demo2024/2318838/images/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/u11026.svg"
                            alt="">
                    </i>
                    <span slot="title">任务管理</span>
                </el-menu-item>
                <!-- 第二个 -->
                <el-submenu index="2">
                    <template slot="title">
                        <i class=""><img
                                src="https://cdn7.axureshop.com/demo2024/2318838/images/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/u10999.svg"
                                alt=""></i>
                        <span>审批管理</span>
                    </template>
                    <el-menu-item index="1-1" @click="navigateTo('/Initiate')">我发起的</el-menu-item>
                    <el-menu-item index="1-1" @click="navigateTo('/Undertake')">我负责的</el-menu-item>
                    <el-menu-item index="1-1" @click="navigateTo('/Delegate')">抄送我的</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class=""><img
                                src="https://cdn7.axureshop.com/demo2024/2318838/images/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/u11007.svg"
                                alt=""></i>
                        <span>合同管理</span>
                    </template>
                    <el-menu-item index="2-1" @click="navigateTo('/ClientsContractManagement')">委托方合同管理</el-menu-item>
                    <el-menu-item index="2-1" @click="navigateTo('/CarrierContractManagement')">承运方合同管理</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class=""><img
                                src="https://cdn7.axureshop.com/demo2024/2318838/images/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/u11014.svg"
                                alt=""></i>
                        <span>基础信息</span>
                    </template>
                    <el-menu-item index="1-1">委托方基本信息</el-menu-item>
                    <el-menu-item index="1-1">产品基本信息</el-menu-item>
                    <el-menu-item index="1-1">上下游管理</el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class=""><img
                                src="https://cdn7.axureshop.com/demo2024/2318838/images/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/u11040.svg"
                                alt=""></i>
                        <span>发货管理</span>
                    </template>
                    <el-menu-item index="1-1">代发货产品</el-menu-item>
                    <el-menu-item index="1-1">发货计划管理</el-menu-item>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                        <i class=""><img
                                src="https://cdn7.axureshop.com/demo2024/2318838/images/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/u11061.svg"
                                alt=""></i>
                        <span>库存管理</span>
                    </template>
                    <el-menu-item index="1-1">库存查询</el-menu-item>
                    <el-menu-item index="1-1">库存盘点</el-menu-item>
                    <el-menu-item index="1-1">信息变更</el-menu-item>
                </el-submenu>
                <el-submenu index="7">
                    <template slot="title">
                        <i class=""><img
                                src="https://cdn7.axureshop.com/demo2024/2318838/images/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/u11070.svg"
                                alt=""></i>
                        <span>仓库管理</span>
                    </template>
                    <el-menu-item index="1-1">仓库管理</el-menu-item>
                    <el-menu-item index="1-1">库区管理</el-menu-item>
                    <el-menu-item index="1-1">分区管理</el-menu-item>
                    <el-menu-item index="1-1">货位管理</el-menu-item>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title">
                        <i class="">
                            <img src="https://cdn7.axureshop.com/demo2024/2318838/images/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/u11124.svg"
                                alt="">
                        </i>
                        <span>报表管理</span>
                    </template>
                    <el-menu-item index="1-1">入库记录</el-menu-item>
                    <el-menu-item index="1-1">出库记录</el-menu-item>
                    <el-menu-item index="1-1">收货记录</el-menu-item>
                    <el-menu-item index="1-1">验收记录</el-menu-item>
                    <el-menu-item index="1-1"></el-menu-item>
                </el-submenu>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
export default {
    methods: {
        navigateTo(path) {
            if (this.$route.path != path) {
                this.$router.push(path);
            }
            // console.log(path);
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
};
</script>

<style scoped>
.fixed-width {
    width: 187px;
    /* 设置固定宽度 */
}

.el-menu-item {
    width: 186.3px !important;
    box-sizing: border-box !important;
}

.el-submenu .el-menu-item {
    height: 50px;
    line-height: 50px;
    padding: 0 45px;
    min-width: 186.3px !important;
}

.index {
    position: relative;
}

.right {
    position: absolute;
    top: 0;
    left: 189px;
}

.title {
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    background-color: #434343;
    color: #f0f0f0;
    text-align: center;
    font-size: 16px;
    width: 186.3px;
}

i img {
    margin-right: 5px;
}
.tac {
    height: 100%;
    background-color: #fff !important;
}
</style>